﻿
<div class="layui-card" id="RoleAdd">
    <div class="layui-card-header">
        <i class="fa fa-home fa-lg fa-fw"></i> 角色添加
        <div class="tool layui-inline" style="float: right">
            <a class="layui-btn layui-btn-sm" href="javascript:;" v-on:click="Back()" title="返回"><i class="fa fa-refresh fa-fw fa-xs" aria-hidden="true"></i>返回</a>
        </div>
    </div>
    <div class="layui-card-body">
        <form class="layui-form layui-form-pane" action="" lay-filter="RoleForm">
            <div class="layui-form-item">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-block">
                    <input type="text" name="Name" class="layui-input" placeholder="填写角色名称" v-model="role.Name" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item" pane="">
                <label class="layui-form-label">是否启用</label>
                <div class="layui-input-block">
                    <div :class="['layui-unselect layui-form-switch',{'layui-form-onswitch':role.IsUsing==1}]" lay-skin="_switch" v-on:click="OnUseSwitch">
                        <em>{{role.IsUsing==1?"ON":"OFF"}}</em><i></i>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">描述:</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" class="layui-textarea" v-model="role.Intro"></textarea>
                </div>
            </div>
            <div class="layui-form-item layui-form-text ">
                <label class="layui-form-label">模块权限:</label>
                <div class="layui-input-block lg-tree-wrap">
                    <table class="lg-tree-table" style="min-width:900px">
                        <thead class="lg-tree-head">
                            <tr>
                                <th class="lg-tree-title">模块</th>
                                <th class="lg-tree-title" v-for="item in powerMap">{{item.text}}</th>
                            </tr>
                        </thead>
                        <tbody class="lg-tree-body">
                            <tr :class="['lg-tree-item','depth-'+item.Depth,{'open':item.Open}]" v-show="item.Show" v-for="(item,index) in modules">
                                <td class="lg-tree-elem"><span class="lg-tree-indent"></span><i class="fa fa-caret-right" :class="{'fa-hide':!item.HasSub}" v-on:click="OnSlide(item)"></i>{{item.Name}}</td>
                                <td class="lg-tree-elem" v-for="power in powerMap">
                                    <div :class="['layui-unselect layui-form-switch',{'layui-form-onswitch':HasPower(item.Id,power.key)}]" v-on:click="OnPowerSelect(item.Id,power.key)" v-if="item.PowerItem.indexOf(power.key)>-1">
                                        <em>{{HasPower(item.Id,power.key)?"ON":"OFF"}}</em><i></i>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="layui-form-item text-center">
                <button class="layui-btn" lay-submit="" lay-filter="AddRole">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>
    </div>
</div>

<script>
    frame.createPage({
        mounted: function() {
            var page = this;
            var app = Vue.createApp({
                data() {
                    return {
                        powerMap: [
                            { key: "Read", text: "读取" },
                            { key: "Add", text: "新增" },
                            { key: "Edit", text: "编辑" },
                            { key: "Delete", text: "删除" },
                            { key: "Check", text: "审核" },
                            { key: "Import", text: "导入" },
                            { key: "Export", text: "导出" }

                        ],
                        modules: [],
                        powers: [],
                        role: {
                            Name: "",
                            Intro: "",
                            IsUsing: 1
                        }
                    }
                },
                mounted: function() {
                    this.processModule();
                    this.renderForm();
                },
                methods: {
                    processModule: function() {
                        var modules = lg.obj.copy(frame.data.nav.menu);
                        for (let i in modules) {
                            var module = modules[i];
                            module.Open = false;
                            module.Show = module.Depth == 1
                            if (modules.filter(p => p.FatherId == module.Id).length > 0) {
                                module.HasSub = true;
                            }
                        }
                        this.modules = this.Sort(modules, 0, []);
                    },
                    Sort: function(data, fid, arr) {
                        var that = this
                        var grades = data.filter(d => d.FatherId == fid)
                        if (grades.length > 0) {
                            for (let i in grades) {
                                var obj = grades[i];
                                arr.push(obj);
                                that.Sort(data, obj.Id, arr)
                            }
                        }
                        return arr;
                    },
                    OnSlide: function(item) {
                        item.Open = !item.Open;
                        var subTree = this.Sort(this.modules, item.Id, []);
                        if (item.Open) {
                            let opened = subTree.filter(p => p.Open);
                            for (let i in subTree) {
                                let obj = subTree[i];
                                if (obj.FatherId == item.Id || opened.filter(p => p.Id == obj.FatherId).length > 0) {
                                    obj.Show = true;
                                }
                            }
                        } else {
                            for (let i in subTree) {
                                let obj = subTree[i];
                                obj.Show = false;
                            }
                        }

                    },
                    HasPower: function(id, power, type = 1) {
                        var b = false;
                        var arr = this.powers.filter(p => p.Id == id);
                        if (arr.length > 0) {
                            obj = arr[0];
                            if (obj.Powers.indexOf(power) > -1) {
                                b = true;
                            }
                        }
                        return b;
                    },
                    OnPowerSelect: function(id, key, type = 1) {
                        var arr = this.powers.filter(p => p.Id == id);
                        console.log(arr);
                        if (arr.length > 0) {
                            obj = arr[0];
                            powerArry = obj.Powers.split(",");
                            filterPowerArry = powerArry.filter(p => p != key);
                            console.log(powerArry)
                            if (powerArry.length == filterPowerArry.length) {
                                powerArry.push(key);
                                obj.Powers = powerArry.join();
                            } else {
                                obj.Powers = filterPowerArry.join();
                            }
                        } else {
                            this.powers.push({ Id: id, Type: type, Powers: key })
                        }
                    },
                    OnUseSwitch: function() {
                        if (this.role.IsUsing == 1) {
                            this.role.IsUsing = 0
                        } else {
                            this.role.IsUsing = 0
                        }
                    },
                    Back: function() {
                        frame.Back(page.url, res => {
                            res.laytable.reload()
                        })
                    },
                    renderForm: function() {
                        var that = this;
                        var form = layui.form;
                        form.on("submit(AddRole)", function(d) {
                            that.role.Powers = JSON.stringify(that.powers);
                            lg.request({
                                url: "/base/AddRole",
                                method: "post",
                                data: that.role,
                                success: res => {
                                    if (res.code == 0) {
                                        layer.msg("添加成功!", { icon: 1 })
                                        that.Back();
                                    } else {
                                        layer.msg(res.msg, { icon: 2 })
                                    }
                                }
                            })
                            return false;
                        })
                    }
                }
            }).mount("#RoleAdd")
        }
    }).mount();
</script>

